<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Display Media : Ionize User Guide</title>

<style type='text/css' media='all'>@import url('../userguide.css');</style>
<link rel='stylesheet' type='text/css' media='all' href='../userguide.css' />

<script type="text/javascript" src="../nav/nav.js"></script>
<script type="text/javascript" src="../nav/prototype.lite.js"></script>
<script type="text/javascript" src="../nav/moo.fx.js"></script>
<script type="text/javascript" src="../nav/user_guide_menu.js"></script>

<meta http-equiv='expires' content='-1' />
<meta http-equiv= 'pragma' content='no-cache' />
<meta name='robots' content='all' />
<meta name='author' content='Ionize Dev Team' />
<meta name='description' content='Ionize User Guide' />

</head>
<body>

<!-- START NAVIGATION -->
<div id="nav"><div id="nav_inner"><script type="text/javascript">create_menu('../');</script></div></div>
<div id="nav2" onclick="myHeight.toggle();"><a name="top"></a><a href="javascript:void(0);"><img src="../images/nav_toggle_darker.jpg" width="154" height="43" border="0" title="Toggle Table of Contents" alt="Toggle Table of Contents" /></a></div>
<div id="masthead">
<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
<tr>
<td><h1>Ionize User Guide Version 0.9.7</h1></td>
<td id="breadcrumb_right"><a href="../toc.html">Table of Contents Page</a></td>
</tr>
</table>
</div>
<!-- END NAVIGATION -->


<!-- START BREADCRUMB -->
<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
<tr>
<td id="breadcrumb">
<a href="http://www.ionizecms.com/">Ionize Home</a> &nbsp;&#8250;&nbsp;
<a href="../index.html">User Guide Home</a> &nbsp;&#8250;&nbsp;
Display Media
</td>
<td id="searchbox"><form method="get" action="http://www.google.com/search"><input type="hidden" name="as_sitesearch" id="as_sitesearch" value="ionizecms.com/user-guide" />Search User Guide&nbsp; <input type="text" class="input" style="width:200px;" name="q" id="q" size="31" maxlength="255" value="" />&nbsp;<input type="submit" class="submit" name="sa" value="Go" /></form></td>
</tr>
</table>
<!-- END BREADCRUMB -->

<br clear="all" />


<!-- START CONTENT -->
<div id="content">

<h1>Display Media</h1>

<p>To display the media, we will use the <dfn>&lt;ion:medias /></dfn>tag.</p>

<h2>Loop through linked media</h2>

<p>The <dfn>&lt;ion:medias /></dfn> tag can be used in the page context or as nested tag for the &lt;ion:articles /> tag, to loop through a type of media.</p>

<p>4 kind of media are available : picture, music, video and file.</p>


<pre>
<dfn>&lt;!-- Displays the page title --></dfn>
&lt;ion:title />

<dfn>&lt;!-- Loops through the pages PDF media --></dfn>
&lt;ion:medias type="file" extension="pdf">

&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="&lt;ion:url />">&lt;ion:name />&lt;/a>

&lt;/ion:medias>

<dfn>&lt;!-- Loops through the articles and, for each article, display linked pictures --></dfn>
&lt;ion:articles>

&nbsp;&nbsp;&nbsp;&nbsp;<dfn>&lt;!-- Article's title --></dfn>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;ion:title tag="h2" />

&nbsp;&nbsp;&nbsp;&nbsp;<dfn>&lt;!-- Article's images medias --></dfn>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;ion:medias type="picture">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<dfn>&lt;!-- Displays the auto-generated thumbs from the "thumb_medium" folder as link to the full sized picture --></dfn>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="&lt;ion:src />">&lt;img src="&lt;ion:src folder="medium" />" />&lt;/a>

&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ion:medias>

&lt;/ion:article>

</pre>


<h2>Display only one media</h2>

<p>Displaying the first linked media of an article or a page will be done like this :</p>

<pre>
<dfn>&lt;!-- Displays the first picture from thumb folder called "thumb_230" --></dfn>
&lt;img src="&lt;ion:media type="picture" folder="230" attr="src" />" alt="&lt;ion:media type="picture" attr="alt" />" />
</pre>

<p>If you want to display a enclosing media tag only if a picture is linked to a parent, you will need to use a little block of PHP :</p>

<pre>
<dfn>&lt;!-- Conditional display of the first picture --></dfn>
<kbd>&lt;php</kbd> if('&lt;ion:media type="picture" attr="src" />' != '') <kbd>:?></kbd>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="my_class">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src="&lt;ion:media type="picture" folder="230" attr="src" />" alt="&lt;ion:media type="picture" attr="alt" />" />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div>
<kbd>&lt;php</kbd> endif <kbd>;?></kbd>
</pre>




</div>
<!-- END CONTENT -->


<div id="footer">
<p>
Previous Topic:&nbsp;&nbsp;<a href="./articles_from_another_page.html.html">Display articles from another page</a>
&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
<a href="#top">Top of Page</a>&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
<a href="../index.html">User Guide Home</a>&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
Next Topic:&nbsp;&nbsp;<a href="extend_the_data_model.html">Extend the data model</a>
</p>
<p><a href="http://www.ionizecms.com/">Ionize website</a></p>
</div>

</body>
</html>